<template>
  <div class="content">
  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
    <el-tab-pane label="APP列表" name="first" class="filter-item">
      <el-button type="primary" style="margin-bottom: 16px;" @click="appAdd()" plain>添加</el-button>
      <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="APP名称" prop="name">
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="createdTime">
      </el-table-column>
      <el-table-column align="center" label="包名" prop="packageName">
      </el-table-column>
      <el-table-column
      align="center"
      label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="editClick(scope.row)">编辑</el-button>
        <el-button type="text" @click="handleClick(scope.row.oid)" size="small">删除</el-button>
      </template>
    </el-table-column>
    </el-table>


    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
import tabPane from './components/tabPane'
import { appList } from '@/api/article'
import axios from 'axios'
export default {
    data() {
      return {
        activeName2: 'first',
        list: [{
        mm: {
          nn: "mmmmm",
          kk: "3423",
          dd: "2323"
        },
        ii: "888"
      }],
      };
    },
    mounted(){
      this.appShow()
    },
    methods: {
      editClick(){
        // var path = 'appEdit?oid=' + scope.row.oid + "&name=" + scope.row.name + "&packageName=" + scope.row.packageName;
        // console.log(path)
        // this.$router.push(path)
        this.$router.push({name: 'appEdit', params: {oid: '1'}})
      },
      appAdd(){
        this.$router.push('appAdd')
      },
      handleClick(tab, event) {
        axios.delete("/app/" + tab).then(response => {
          this.appShow()
        })
      },
      appShow() {
        axios.get("/app/query").then(response => {
          this.list = response.data
        })
      }
    }
  };
</script>

<style scoped>
  .tab-container{
    margin: 30px;
  }
  .content {
    margin-left: 30px;
    margin-top: 30px;
  }
</style>
